<template>
	<view>
		<comHeader :config="navConfig"/>
		<!-- 扫码 -->
		<view id="barcode"></view>
		<view class="scanTips"><text>可识别您想要了解的物品</text></view>
		<view class="scanChaner">
			<view 
			v-for="(scanType,index) in newScanList"
			:key="index"
			@tap="typeBtn(index)">
			<text :class="scanIndex == index ? 'active' : ''">{{scanType.text}}</text>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				navConfig:{
					isFixed: true, //是否absolute布局
					left: {
					
						isShowLeft: true,
						leftGobackColor: 'black', //左边返回icon颜色
					},
					mid: {
						isShowMid: false,
						text: '',
						textColor: '#ffffff',
						isShowIco:false,
						ico:'',
						icoColor:''
						
					},
					right: {
						text: '',
						textColor: '#000000',
						isShowRight: false,
						ico: '', //右侧图标地址
						isShowRightIco: false ,//是否显示右侧图标
						ico2: '', //右侧第二个图标地址
						isShowRightIco2: false //是否显示右侧第二个图标
					}
				},
				scanList:[
					{
						text:'扫一扫',
					},
					{
						text:'见物识别',
					},
					{
						text:'幸运彩蛋',
					},
				],
				fromScan:null,//从哪页进来的参数从而判断都显示扫什么
				scanIndex:0,//默认选中第一个扫一扫
				height:null,
				// #ifdef APP-PLUS
				barcode: 'plus.barcode.EAN13',//码类型
				
				// #endif
			};
		},
		created() {
			var top = global.statusBarHeight + 44 + 'px'
			this.height = global.winHeight -global.statusBarHeight - 144 + 'px';
			// this.height = '300px'
			console.log(this.height);
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			// #ifdef APP-PLUS
			var currentWebview = page.$getAppWebview();
			this.barcode = plus.barcode.create('barcode', this.barcode, {
				background:'#666666',
				scanbarColor: '#6B9FFF',
				frameColor: '#6B9FFF',
				top: top,
				left: '0px',
				width: '100%',
				height: this.height,//这里可以设置扫码框的高度
				position: 'static',
				
			});
			this.barcode.onmarked = this.onmarked;
			currentWebview.append(this.barcode);
			const res = uni.getSystemInfoSync();
			if(res.platform == 'android'){//安卓机
				this.barcode.start();
			}
			// #endif
		},
		onUnload() {
			clearTimeout(this.t);
		},
		methods: {
			onmarked(type, result) {
				console.log(type +':'+ result);
				uni.navigateBack({
					delta:1
				})
				// this.$emit('getCode',result);
				this.t=setTimeout(() => {
					this.barcode.start();
				}, 1000)
			},
			// 根据扫码不同类型二维码和街景扫码
			typeBtn(index){
				this.scanIndex = index;
				if(index == 0){
					this.barcode = plus.barcode.QR
					console.log('扫一扫');
				}
				if(index == 1){
					this.barcode = plus.barcode.EAN13
					console.log('见物识别');
					this.height = '100%';
					console.log(this.height);
				}
				if(index == 2){
					this.barcode = plus.barcode.EAN13
					console.log('幸运彩蛋');
					this.height = '500px'
					console.log(this.height);
				}
			}
		},
		onLoad(e) {
			console.log(e);
			this.fromScan = e.from;
			
		},
		computed:{
			newScanList(){
				if(this.fromScan == 1){
					let filterScanList = this.scanList.filter((item,index)=>{
						return index = 1
					});
					return filterScanList
					console.log(filterScanList);
				}else{
					return this.scanList
					console.log();
				}
			}
		}
	}
</script>

<style>
	.scanChaner{
		width:100%;
		background: #000000;
		position:absolute;
		bottom:0;
		left:0;
		z-index: 99;
		height: 200upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.scanTips{
		color: #ffffff;
		position: absolute;
		z-index: 99;
	}
	.scanChaner view{
		width:33.3%;
		text-align: center;
	}
	.scanChaner>view text{
		color:#fff;
		font-size: 26upx;
	}
	.active{
		color: #6B9FFF !important;
	}
</style>
